<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>周变图</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link href="./css/search.css" rel="stylesheet" type="text/css"/>
	<link href="./css/header.css" rel="stylesheet" type="text/css"/>
	<link href="./css/userinfo.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="js/highcharts.js"></script>
	<script src="js/exporting.js"></script>
	
	<script type="text/javascript">
  $(function(){
	  $('#userUrl').keypress(function(e){
			if(e.keyCode == 13){
				$('#btn').click();
			}
		});
	  $('#btn').click(function() {
		  var pattern = '^[0-9a-zA-Z]{4,20}$';
		  if(!$('#userUrl').val().match(pattern))
			  {
			  	alert('请输入正确的 uid/个性域名/微号！');
			  }
		  else{
			  $('#loading').show();
	          $.ajax({
	        	  type: "POST",
	              dataType: "JSON",
	              url:"servlet/WeeklyColumn",
	              data: $('#userUrl').serialize(),
	              success: function (data) {
	            	  $('#loading').hide();
	            	  $('#info').show();
						var screenName = data.userInfo[0]; //用户昵称
						$('.listpic a').attr("href",
								data.userInfo[1]); //用户url
						$('.leftB a').attr("href",
								data.userInfo[1]);
						$('.listpic img').attr("src",
								data.userInfo[2]); //添加头像url
						$('#nameInfo a').text(
								screenName); //用户昵称
						$('#region').text(
								data.userInfo[3]); //用户性别极其地区
						$('#follow').text(
								data.userInfo[4]); //关注数
						$('#fans').text(
								data.userInfo[5]); //粉丝数
						$('#statuses').text(
								data.userInfo[6]); //微博数
	            	 
								var chart = new Highcharts.Chart({
									exporting: {
							            buttons: {
							                contextButton: {
							                    menuItems: [
							                    	Highcharts.getOptions().exporting.buttons.contextButton.menuItems[0]
							                    ]
							                    .concat([{
							                        separator: true
							                    },{
							                        text: '导出PNG文件',
							                        onclick:function() {
							                        	exportChart(chart,"image/png");
							                        }
							                    },{
							                        text: '导出JPG文件',
							                        onclick:function() {
							                        	exportChart(chart,"image/jpeg");
							                        }
							                    },{
							                        text: '导出SVG文件',
							                        onclick:function() {
							                        	exportChart(chart,"image/svg+xml");
							                        }
							                    },{
							                        text: '导出PDF文件',
							                        onclick:function() {
							                        	exportChart(chart,"application/pdf");
							                        }
							                    }])
							                }
							            }
							        },
	            	        chart: {
	            	            type: 'column',
	            	            renderTo: 'container'
	            	        },
	            	        title: {
	            	            text: screenName+'的情感周变图'
	            	        },
	            	        subtitle: {
	            	            text: '(堆叠柱状图)'
	            	        },
	            	        xAxis: {
	            	            categories: ['周天','周一', '周二', '周三', '周四', '周五','周六']
	            	        },
	            	        yAxis: {
	            	            min: 0,
	            	            title: {
	            	                text: '情感值'
	            	            },
	            	            stackLabels: {
	            	                enabled: true,
	            	                style: {
	            	                    fontWeight: 'bold',
	            	                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
	            	                }
	            	            }
	            	        },
	            	        legend: {
	            	            align: 'right',
	            	            x: -30,
	            	            verticalAlign: 'top',
	            	            y: 25,
	            	            floating: true,
	            	            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
	            	            borderColor: '#CCC',
	            	            borderWidth: 1,
	            	            shadow: false
	            	        },
	            	        tooltip: {
	            	            formatter: function () {
	            	                return '<b>' + this.x + '</b><br/>' +
	            	                    this.series.name + ': ' + this.y + '<br/>' +
	            	                    'Total: ' + this.point.stackTotal;
	            	            }
	            	        },
	            	        plotOptions: {
	            	            column: {
	            	                stacking: 'normal',
	            	                dataLabels: {
	            	                    enabled: false,
	            	                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
	            	                    style: {
	            	                        textShadow: '0 0 3px black'
	            	                    }
	            	                }
	            	            }
	            	        },
	            	        series: data.series,
	            	        credits:{
	            	        	enabled:false
	            	        }
	            	    });
								$(".download").click(function(){
							    	exportChart(chart,$(this).attr("type"));
							    });
	              },
	              error: function(data) {
	            	  $('#loading').hide();
	                  alert("error:"+data.responseText);
	               }

	          });
		  }
		  
	  }
	);
	  function exportChart(chart,type) {
			$("input[name='svg']").val(chart.getSVG());
			$("input[name='width']").val(600);
			$("input[name='type']").val(type);
			$("input[name='method']").val("download");
			$("form").submit();
		}
  });
 
  </script>
  </head>
  
  <body>
  
  <div id="header">
        <div id="logo">
			<a href="./index.jsp">
				<img src="./img/logo.png">
			</a>
		</div>
        <div id="nav">
            <ul class="menu">
                <li class="current"><a href="./index.jsp">首页</a></li>
                <li><a href="./spline.jsp">在线分析</a>
                  <ul>
                  <li><a href="./spline.jsp">曲线图</a></li>
                  <li><a href="./pie.jsp">饼状图</a></li>
                  <li><a href="./hourlyline.jsp">时变图</a></li>
                  <li><a href="./weeklycolumn.jsp">周变图</a></li>
                  </ul> 
                  </li>
                <li><a href="./single.jsp">即时分析</a><span class="lines"></span></li>           
                <li><a href="./offline.jsp">离线分析</a><span class="lines"></span></li>
            </ul>
        </div>
</div>
   <div class="search">
    <div id="search">
    <input type="text" name="userUrl" id="userUrl" value="请输入微博uid/个性域名/微号" 
    onFocus="if(value==defaultValue){value='';this.style.color='#000'}" 
    onBlur="if(!value){value=defaultValue;this.style.color='#999'}" 
    style="color:#999999">
    <input id="btn" class="button" type="button" value="提交">
    </div>
  </div>
   
   <div id="loading" style="display: none ;margin:0 0 20px 0" align="center" >
			<img weight=“40px” height="40px" src="./img/loading.gif">
		</div>
    
    <div id="info" class="list_weibo yahei" style="display: none">
			<div style="left: 9px; top: -10px; z-index: 100" class="listpic">
				<a target="_blank"> <img width="80" height="80"> </a>
			</div>
			<div style="padding: 8px 0 0 0; float: left" class="leftB">
				<p id="nameInfo">
					<span style="font-size: 14px;"> <strong> <a
							target="_blank" style="text-decoration: none; color: #FFF;">昵称</a>
					</strong> <span class=""></span> </span>
				</p>
				<p id="otherInfo">
					<span id="region">性别/地区</span>
					<span class="blue">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
					<span class="blue">关注&nbsp;</span>
					<span id="follow">0</span>
					<span class="blue">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
					<span class="blue">粉丝&nbsp;</span>
					<span id="fans">0</span>
					<span class="blue">&nbsp;&nbsp;|&nbsp;&nbsp;</span>
					<span class="blue">微博&nbsp;</span>
					<span id="statuses">0</span>
				</p>
			</div>
		</div>
		
   <div id="container" style="height: 400px"></div>
   <!-- 隐藏的表单 -->
	<form method="post" action="servlet/ExportServlet">
		<input type="hidden" name="svg">
		<input type="hidden" name="width">
		<input type="hidden" name="type">
		<input type="hidden" name="method">
	</form> 
  </body>
</html>
